<template>
	<view :style="viewColor"><!-- -->
		<!-- <view class="titleBar">
			<image class="imgback" src="@/static/images/back.png" mode="aspectFill" @click="pageback()">
			</image>
			<image class="imgtx" :src="xinxilist.avatar" mode="aspectFill"></image>
			<text>{{xinxilist.nickname}}</text>
		</view> -->
		<!-- <view style="height: 120rpx;"></view> -->
		<!-- 轮播图 -->
		<view class="bigImg">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="5000" :duration="200"
				v-if="photoList.length>0">
				<swiper-item v-for="(item,index) in photoList" :key="index">
					<image class="bannerImg" :src="item"></image>
				</swiper-item>
			</swiper>
			<image class="bannerImg" v-if="photoList.length<1" :src="xinxilist.avatar">
				<image class="imgback" :style="{top:statusBarHeight}" src="@/static/images/back.png" mode="aspectFill"
					@click="pageback()">
		</view>

		<!-- 基本信息 -->
		<view class="cardView">
			<view class="leftView">
				<view class="topView">
					<text class="name_text">{{xinxilist.nickname}}</text>
					<view class="sex0" v-if="xinxilist.sex == 0">
						<image src="@/static/images/bm.png" mode="aspectFill"></image>
						<text>{{xinxilist.age}}</text>
					</view>
					<view class="sex" v-if="xinxilist.sex == 1">
						<image src="@/static/images/nan.png" mode="aspectFill"></image>
						<text>{{xinxilist.age}}</text>
					</view>
					<view class="sex1" v-if="xinxilist.sex == 2">
						<image src="@/static/images/nv.png" mode="aspectFill"></image>
						<text>{{xinxilist.age}}</text>
					</view>
				</view>
				<view class="bottomView">
					<text
						class="botmText">{{district || city || province}}·{{!xinxilist.fabulous ?0:xinxilist.fabulous}}点赞</text>
				</view>
			</view>
			<view class="rightView">
				<image class="img1" src="@/static/images/weidianzan.png" mode="aspectFill" v-if="!isLike"
					@click="kaopu"></image>
				<image class="img1" src="@/static/images/dianzan.png" mode="aspectFill" v-if="isLike" @click="kaopu">
				</image>
				<image class="img2" src="@/static/images/qrcode.png" mode="aspectFill" @click="haibao">
				</image>
			</view>
		</view>
		<view class="introduce" v-if="xinxilist.autograph">
			<text>{{xinxilist.autograph}}</text>
			<!-- <view class="zk">
				<image src="@/static/images/zk.png" mode="aspectFill"></image>
			</view> -->
		</view>
		<view class="liulanr">
			<div>
				<div class="touxian">
					<div v-for="(item,index) in fabulist" :key="index" v-if="index<3">
						<image :src="item.avatar" mode=""></image>
					</div>
				</div>
			</div>
			<view class="views-text">
				<span>浏览量{{xinxilist.views ? xinxilist.views : 0}}</span>
				<span style="margin-left: 10rpx;">·
					今日+{{xinxilist.fabulous_today ? xinxilist.fabulous_today : 0}}</span>
			</view>
		</view>
		<view class="tabView">
			<view class="tabItem" v-for="(item,index) in tabList" :key="index" @click="changeTab(item,index)">
				<text class="text1" v-if="item.isSelected">{{item.name}}</text>
				<text class="text2" v-if="!item.isSelected">{{item.name}}</text>
				<view style="width: 100%;height: 2rpx;background-color: var(--view-theme);" v-if="item.isSelected"></view>
				<view style="width: 100%;height: 2rpx;background-color: #FFF;" v-if="!item.isSelected"></view>
			</view>
		</view>
		<view class="labelView" v-if="tabId == 0">
			<view class="labelItem" v-if="xinxilist.ysr_text">
				<text>月收入</text>
				<text v-if="xinxilist.ysr_text">{{xinxilist.ysr_text + "万元"}}</text>
				<text v-if="!xinxilist.ysr_text">{{none}}</text>
			</view>
			<view class="labelItem" v-if="xinxilist.sg_text">
				<text>身高</text>
				<text v-if="xinxilist.sg_text">{{xinxilist.sg_text + "厘米"}}</text>
				<text v-if="!xinxilist.sg_text">{{none}}</text>
			</view>
			<view class="labelItem" v-if="xinxilist.xz_text">
				<text>星座</text>
				<text>{{xinxilist.xz_text || none}}</text>
			</view>
			<view class="labelItem" v-if="xinxilist.tz_text">
				<text>体重</text>
				<text v-if="xinxilist.tz_text">{{xinxilist.tz_text + "千克"}}</text>
				<text v-if="!xinxilist.tz_text">{{none}}</text>
			</view>
			<view class="labelItem" v-if="xinxilist.hk_text">
				<text>婚况</text>
				<text>{{xinxilist.hk_text || none}}</text>
			</view>
			<view class="labelItem" v-if="xinxilist.xl_text">
				<text>学历</text>
				<text>{{xinxilist.xl_text || none}}</text>
			</view>
			<view class="labelItem" v-if="xinxilist.zy_text">
				<text>职业</text>
				<text>{{xinxilist.zy_text || none}}</text>
			</view>
			<view class="labelItem1" v-if="xinxilist.xq_text">
				<text>兴趣爱好</text>
				<textarea disabled v-model="xinxilist.xq_text" v-if="xinxilist.xq_text"></textarea>
				<textarea disabled v-model="none" v-if="!xinxilist.xq_text"></textarea>
			</view>
			<view class="labelItem1" v-if="xinxilist.fc_text">
				<text>房车情况</text>
				<textarea disabled v-model="xinxilist.fc_text" v-if="xinxilist.fc_text"></textarea>
				<textarea disabled v-model="none" v-if="!xinxilist.fc_text"></textarea>
			</view>
		</view>
		<view class="dongtai" v-if="tabId == 1">
			<view class="dtlist" v-for="(item,index) in dongtaiList" :key="index" @click="jumpDetail(item)">
				<view class="topView">
					<image class="avatarimg" :src="item.author.avatar" mode="aspectFill"></image>
					<view class="nameView">
						<text class="name_text">{{item.author.nickname}}</text>
						<view class="sex0" v-if="item.author.sex == 0">
							<image src="@/static/images/bm.png" mode="aspectFill"></image>
							<text>{{item.author.age}}</text>
						</view>
						<view class="sex" v-if="item.author.sex == 1">
							<image src="@/static/images/nan.png" mode="aspectFill"></image>
							<text>{{item.author.age}}</text>
						</view>
						<view class="sex1" v-if="item.author.sex == 2">
							<image src="@/static/images/nv.png" mode="aspectFill"></image>
							<text>{{item.author.age}}</text>
						</view>
					</view>
					<view class="dianzan">
						<image style="width: 30rpx;height: 30rpx;margin-bottom: 5rpx;" :src="imgHost1+'like.png'">
						</image>
						<text>{{item.start}}</text>
					</view>
				</view>
				<view class="contentView">
					<text>{{item.content}}</text>
				</view>
				<view class="contentImg" v-if="item.image.length>0">
					<image :src="item.image[0]" mode="aspectFill" @click.stop="PreviewImg(item.image)"></image>
				</view>
				<view style="height: 2rpx;background-color: #F6F8F9;"></view>
			</view>
		</view>
		<!-- <view class="cardBottom">
			<image src="@/static/images/addwx.png" mode="aspectFill" @click="dianji(1)"></image>
			<image src="@/static/images/send.png" mode="aspectFill" @click="dianji(2)"></image>
			<image src="@/static/images/share.png" mode="aspectFill" @click="dianji(3)"></image>
			<image src="@/static/images/switch.png" mode="aspectFill" @click="dianji(4)"></image>
		</view> -->
		<div class="herd"></div>
		<uni-popup ref="createdIwPop" type="center">
			<view class="oback" @click="showiw">
				<div class='odivpp'>
					<image class="oive" :src="imgHost + '/mine/top.png'" mode=""></image>
					<p>
						<image :src="imgHost + '/mine/bottom.png'" mode=""></image>
						点击右上角“ ”，选择添加朋友，粘贴微信号后搜索
					</p>
					<p>
						<image :src="imgHost + '/mine/one.png'" mode=""></image>
						微信号已复制，点击右上角“ ”退出
					</p>

					<image class="oivee" :src="imgHost + '/mine/bott.png'" mode=""></image>
				</div>
				<div class="oimage">
					<image :src="imgHost + '/mine/wxwx.png'" mode=""></image>
				</div>
			</view>
		</uni-popup>
		<uni-popup ref="ifdenlu" type="center">
			<div class="odiver">
				<view class="odictwo">
					<div class='twimg'>
						<image :src="xinxilist.avatar" mode=""></image>
					</div>
					<div class="twtext">
						您好，请先登录再进行此操作!
					</div>
					<div class="annui">
						<view @click="zanbudl">
							暂不登录
						</view>
						<view @click="denlu">
							立即登录
						</view>
					</div>
				</view>
			</div>
		</uni-popup>
		<!-- 分享 -->
		<uni-popup ref="iffenxi" type="center">
			<div class="fenxianger">
				<button class="item" open-type="share" hover-class="none" @click="goFriend">
					<view class="iconfont icon-weixin3"></view>
					<view class="">发送给朋友</view>
				</button>
			</div>
		</uni-popup>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		copyWechat
	} from '@/api/userminp.js'
	import {
		card_fab,
		carduser
	} from '@/api/userminp.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getShareTitle
	} from '@/api/public.js'
	import {
		mapGetters
	} from "vuex";
	// import tabBar from "@/pages/index/visualization/components/tabBar.vue"
	import {
		openNewMessageSubscribe
	} from '@/utils/SubscribeMessage.js';
	// import taber from '../component/taber/taber.vue'
	import {
		graphicStartApi,
		userArticleLst
	} from '@/api/community.js';
	export default {
		components: {
			// tabBar
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin',
				viewColor: 'viewColor',
				keyColor: "keyColor"
			})
		},
		data() {
			return {
				none: '暂无',
				isLike: false,
				tabList: [{
						id: 0,
						name: '关于Ta',
						isSelected: true
					},
					{
						id: 1,
						name: '动态',
						isSelected: false
					}
				],
				tabId: 0,
				fabulist: [],
				is_diy: uni.getStorageSync('is_diy'),
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				imgHost1: HTTP_REQUEST_URL + '/static/contactsCircle/',
				apiHost: HTTP_REQUEST_URL,
				// isLogin:false,
				share_uid: null,
				prolist: [],
				tuijianwz: [],
				qiyexx: [],
				xinxie: [],
				xinxilist: {
					switch_json: {}
				},
				photoList: [],
				shoiwww: false,
				show: false,
				biao: [],
				qiyeVideo: [],
				// 小程序分享标题
				share_title: "",
				img: [{
						image: "/index/token.png",
					},
					{
						image: "/index/token.png",
					},
					{
						image: "/index/token.png",
					}
				],
				minpian: [
					// {
					//                         image: '/index/jiajia.png',
					//                         text: '创建名片',
					//                         ziew: 0,
					//                    },
					{
						image: '/index/wx.png',
						text: '添加微信',
						ziew: 1,
					},
					{
						image: '/index/duoxuan.png',
						text: '发私信',
						ziew: 2,
					},
					{
						image: '/index/iconfj.png',
						text: '转发名片',
						ziew: 3,
					},
					{
						image: '/index/card.png',
						text: '递名片',
						ziew: 4,
					}
				],
				dongtaiList: [],
				statusBarHeight: '', //状态栏高度
				address: '', //用户展示地址
				province: '', //省
				city: '', //市
				district: '', //区

			}
		},
		onLoad(e) {
			this.share_uid = e.uid
			// if (options.share_uid) this.share_uid = options.share_uid
			if (this.viewColor) {
				var arr = this.viewColor.split(";")
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].indexOf("--view-theme") != -1) {
						var col = arr[i].split(": ");
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: col[1]
						})
					}
				}
			}
		},
		onShow() {
			this.getcard_user()
			getShareTitle({
				field: "businessCardShareTitle"
			}).then(res => {
				this.share_title = res.data.businessCardShareTitle
			})
		},
		onShareAppMessage(e) {
			if (e.from === 'button') {
				//console.log('来自页面内转发按钮');
			} else if (e.from === 'menu') {
				//console.log('右上角菜单转发按钮');
			}
			var share_title = '';
			if (this.xinxilist.switch_json.shareCheckText) {
				share_title = this.xinxilist.switch_json.shareCheckText
			}
			return { // 自定义分享内容
				title: share_title,
				path: `/pages/index/minp?share_uid=` + this.share_uid // 路径，可传递参数到指定页面
			}
		},
		onShareTimeline() {
			var share_title = '';
			if (this.xinxilist.switch_json.shareCheckText) {
				share_title = this.xinxilist.switch_json.shareCheckText
			}
			return {
				title: share_title,
				path: `/pages/index/minp?share_uid=` + this.share_uid,
			};
		},
		created() {
			this.getStatusBarHeight()
		},
		methods: {
			//预览动态图片
			PreviewImg(path) {
				uni.previewImage({
					urls: path
				})
			},
			//跳转动态详情
			jumpDetail(item) {
				uni.navigateTo({
					url: "/pages/plantGrass/plant_detail/index?id=" + item.community_id
				})
			},
			//计算状态栏高度
			getStatusBarHeight() {
				const systemInfo = uni.getSystemInfoSync()
				const Height = systemInfo.statusBarHeight
				const statusBarHeight = Height + 8 + "px"
				// 进行后续操作，比如更新状态栏的高度
				console.log(statusBarHeight, '状态栏高度');
				this.statusBarHeight = statusBarHeight
			},
			//返回
			pageback() {
				uni.navigateBack()
			},
			//切换tab
			changeTab(item, index) {
				this.tabList.forEach(item => {
					item.isSelected = false
				})
				this.tabList[index].isSelected = true
				this.tabId = item.id
				this.getdongtai()
			},
			//获取动态列表、
			getdongtai() {
				userArticleLst(this.xinxilist.uid, {
					status: 1,
					is_show: 1,
					page: 1
				}).then(res => {
					console.log(res);
					this.dongtaiList = res.data.list
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					})
				});
			},



			// 分享
			goFriend() {

				if (e.from === 'button') {
					//console.log('来自页面内转发按钮');
				} else if (e.from === 'menu') {
					//console.log('右上角菜单转发按钮');
				}
				return { // 自定义分享内容
					title: "智能名片",
					desc: "",
					path: "/pages/index/minp" // 路径，可传递参数到指定页面
				}
				this.$refs.iffenxi.close()
			},
			// 名片信息
			getcard_user() {
				let then = this
				if (!this.share_uid && this.isLogin) {
					this.share_uid = uni.getStorageSync('UID')
					console.log(1111111111111111111111);
				}
				carduser({
					share_uid: this.share_uid
				}).then((res) => {
					// if (uni.getStorageSync('UID') == '') {
					// 	then.getifdelu()
					// }
					// else {
					// 	if (uni.getStorageSync('UID') == this.share_uid) {
					// 		if (res.data.type == 0) {
					// 			uni.navigateTo({
					// 				url: '/pages/userminp/denlu/denlu'
					// 			})
					// 		}
					// 	}
					// }
					uni.setStorageSync("merId", res.data.enterprise.mer_id)
					uni.setStorageSync("QIYEID", res.data.enterprise.id)
					if (this.share_uid != uni.getStorageSync('UID')) {
						//     let baockh = {
						//          image: '/index/jiajia.png',
						//          text: '保存客户',
						//          ziew: 0,
						//     }
						// this.minpian.splice(0, 1,baockh)
					}
					this.prolist = res.data.product_list.reverse()
					this.fabulist = res.data.fabulous_list
					this.xinxilist = res.data
					// 展示内容开关
					this.xinxilist.switch_json = JSON.parse(this.xinxilist.switch_json)
					this.tuijianwz = res.data.article_list.reverse();
					this.qiyeVideo = res.data.video_list
					this.qiyexx = res.data.enterprise == null ? [] : res.data.enterprise
					this.biao = JSON.parse(res.data.label_names)
					this.photoList = JSON.parse(res.data.poster)

					let address = res.data.addres

					// 定义省市区的变量
					let province = '';
					let city = '';
					let district = '';

					// 解析地址
					const provincePattern = /省|自治区/;
					const cityPattern = /市/;
					const districtPattern = /区|县/;

					// 提取省份信息
					const provinceMatch = address.match(provincePattern);
					if (provinceMatch) {
						province = address.substring(0, provinceMatch.index + 1);
						address = address.substring(provinceMatch.index + 1);
					}

					// 提取城市信息
					const cityMatch = address.match(cityPattern);
					if (cityMatch) {
						city = address.substring(0, cityMatch.index + 1);
						address = address.substring(cityMatch.index + 1);
					}

					// 提取区/县信息
					const districtMatch = address.match(districtPattern);
					if (districtMatch) {
						district = address.substring(0, districtMatch.index + 1);
					}

					// console.log(province); // 输出: 河南省
					// console.log(city); // 输出: 郑州市
					// console.log(district); // 输出: 管城区
					this.province = province
					this.city = city
					this.district = district



					if (this.xinxilist.type == 1) {
						// let osmer = {
						//      image: '/index/jiajia.png',
						//      text: '编辑客户',
						//      ziew: 0,
						// }
						// this.minpian.splice(0, 1, osmer)
					}
					console.log(this.xinxilist);
					console.log(this.province); // 输出: 河南省
					console.log(this.city); // 输出: 郑州市
					console.log(this.district); // 输出: 管城区

				}).catch(re => {
					if (!this.isLogin && !this.share_uid) {
						this.getifdelu()
						console.log(222222222222222222);
					}
				})
			},
			showiw() {
				this.$refs.createdIwPop.close()
			},
			lijiqg(item) {
				copyWechat(this.xinxilist.uid, "1")
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.product_id}`
				})
			},
			zanbudl() {
				this.$refs.ifdenlu.close()
			},
			getifdelu() {
				this.$refs.ifdenlu.open('center')
			},
			// 点赞
			kaopu() {
				if (this.share_uid != uni.getStorageSync('UID')) {
					card_fab({
						z_uid: this.share_uid
					}).then((res) => {
						uni.showToast({
							title: res.message
						})
						this.isLike = true
						this.getcard_user()
					})
				} else {
					uni.showToast({
						title: '不能给自己点赞',
						icon: 'none'
					})
				}

			},
			haibao() {
				// uni.showToast({
				// 	title: '只能查看自己的名片',
				// 	icon: 'none'
				// })
				// // uni.navigateTo({
				// //      url: '/pages/userminp/business/business?share=' + this.share_uid
				// // })

				uni.reLaunch({
					url: '/pages/index/minp?share_uid=' + this.xinxilist.uid,
				})
			},
			// 点击地址
			openMap() {
				if (this.xinxilist.enterprise && (this.xinxilist.enterprise.latitude != '' && this.xinxilist.enterprise
						.longitude != '')) {
					uni.openLocation({
						latitude: parseFloat(this.xinxilist.enterprise.latitude),
						longitude: parseFloat(this.xinxilist.enterprise.longitude),
						name: this.xinxilist.enterprise.address,
						success: (e) => {}
					})
				} else {

				}
			},
			dianji(ziew) {
				console.log(ziew)
				if (!this.isLogin) {
					// this.show = true;
					this.$refs.ifdenlu.open('center')
					return false;
				}
				if (ziew == 0) {
					if (this.xinxilist.type == 1) {
						if (this.share_uid != uni.getStorageSync('UID')) {
							uni.navigateTo({
								url: '/pages/userminp/mine/tianjia/tianjia?share=' + this.share_uid,
							})
						} else {
							uni.navigateTo({
								url: '/pages/userminp/bianjimp/bianjimp',
							})
						}

					} else {
						uni.navigateTo({
							url: '/pages/userminp/denlu/denlu'
						})
					}

				}
				if (ziew == 1) {
					var that = this;
					if (!that.xinxilist.wechat_img) {
						return uni.showToast({
							icon: 'none',
							title: '暂未上传'
						})
					}
					copyWechat(this.xinxilist.uid, "3")
					uni.previewImage({
						urls: [that.xinxilist.wechat_img],
						indicator: "none"
					})
					// 复制电话号
					// uni.setClipboardData({
					//      data: this.xinxilist.phone,
					//      success: function() {
					//           uni.showToast({
					//                icon: 'none',
					//                title: '复制成功'
					//           })
					//      }
					// })
					// this.$refs.createdIwPop.open('center')
				}
				if (ziew == 2) {
					openNewMessageSubscribe().then(res => {
						let url = this.xinxilist.kefu_url
						let service_id = this.xinxilist.kefu_id
						if (service_id) {
							return uni.navigateTo({
								url: `/pages/chat/customer_list/chat?mer_id=0&service_id=` + service_id
							})
						} else {
							return uni.navigateTo({
								url: `/pages/chat/customer_list/chat?mer_id=${this.qiyexx.mer_id}&service_id=` +
									service_id
							})
						}
					})
				}
				if (ziew == 3) {
					// #ifdef MP
					this.$refs.iffenxi.open('bottom')
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url: '/pages/userminp/mpzuf/mpzuf'
					})
					// #endif
				}
				if (ziew == 4) {
					this.xzmp()
				}
			},
			// 递名片
			xzmp() {
				copyWechat(this.xinxilist.uid, "4")
				// if(this.xinxilist && this.xinxilist.is_znmp == 0 ){
				//  uni.showToast({
				// title:"服务时间已到期",
				// icon:"error"
				//  })
				//  return
				// }
				uni.navigateTo({
					url: '/pages/userminp/scrollerm/scrollerm?logo=' + this.qiyexx.logo + '&name=' + this.qiyexx
						.name + '&share=' + this.share_uid + '&natext=' + this.xinxilist.nickname + '&zhiye=' +
						this.xinxilist.position_name
				})
			},
			denlu() {
				uni.navigateTo({
					url: '/pages/users/wechat_login/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.titleBar {
		display: flex;
		align-items: center;
		background-color: #fff;
		position: fixed;
		width: 100vw;
		height: 120rpx;
		z-index: 999;

		.imgback {
			width: 48rpx;
			height: 48rpx;
			margin-right: 40rpx;
			margin-left: 32rpx;
		}

		.imgtx {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			border-radius: 30rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.bigImg {
		position: relative;

		.swiper {
			height: 710rpx;
		}

		.bannerImg {
			width: 100%;
			height: 710rpx;
		}

		.imgback {
			position: absolute;
			left: 32rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.cardView {
		display: flex;
		align-items: center;
		padding: 20rpx 32rpx;
		background-color: #fff;
		display: flex;
		align-items: center;

		.leftView {
			display: flex;
			flex-direction: column;
			flex: 1;

			.topView {
				display: flex;
				align-items: center;
				margin-top: 40rpx;
				margin-bottom: 20rpx;

				.name_text {
					font-size: 36rpx;
					margin-right: 20rpx;
				}

				.sex0 {
					display: flex;
					align-items: center;
					background-color: #666666;
					padding: 4rpx 12rpx;
					border-radius: 44rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}

					text {
						font-size: 20rpx;
						color: #fff;
					}
				}

				.sex {
					display: flex;
					align-items: center;
					background-color: #4fe0fd;
					padding: 4rpx 12rpx;
					border-radius: 44rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}

					text {
						font-size: 20rpx;
						color: #fff;
					}
				}

				.sex1 {
					display: flex;
					align-items: center;
					background-color: #ff557f;
					padding: 4rpx 12rpx;
					border-radius: 44rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}

					text {
						font-size: 20rpx;
						color: #fff;
					}
				}
			}

			.bottomView {
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #999;
				}
			}
		}

		.rightView {
			display: flex;
			align-items: center;

			.img1 {
				width: 68rpx;
				height: 68rpx;
			}

			.img2 {
				width: 100rpx;
				height: 40rpx;
				margin-left: 30rpx;
			}
		}
	}

	.introduce {
		background-color: #FFFFFF;
		padding: 20rpx 32rpx;

		text {
			font-size: 24rpx;
			color: #666666;
		}

		.zk {
			display: flex;
			align-items: center;

			image {
				width: 100rpx;
				height: 36rpx;
			}
		}
	}








	/deep/.u-mode-center-box {
		background-color: transparent;
	}




	.liulanr {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 32rpx;
		background-color: #FFFFFF;

		.kaopu {
			width: 144rpx;
			height: 36rpx;
			border-radius: 18rpx;
			background: transparent;
			text-align: center;

			span {
				font-weight: 400;
				font-size: 26rpx;
				text-align: left;
				color: #a0a0a0;
			}

			image {
				margin-left: 10rpx;
				vertical-align: middle;
				width: 19rpx;
				height: 20rpx;
			}
		}

		div:nth-child(1) {
			.touxian {
				vertical-align: middle;
				display: inline-block;

				div {
					display: inline-block;
					width: 48rpx;
					height: 48rpx;
					border-radius: 100rpx;
					overflow: hidden;
					vertical-align: middle;

					image {
						width: 100%;
						height: 100%;
					}
				}

				div:nth-child(2) {
					margin-left: -20rpx;
				}

				div:nth-child(3) {
					margin-left: -20rpx;
				}
			}

			p {
				margin-left: 70rpx;
				vertical-align: middle;
				display: inline-block;
				font-weight: 600;
				font-size: 28rpx;
				text-align: left;
				color: #161616;
			}

			span {
				vertical-align: middle;
				margin-left: 10rpx;
				font-weight: 400;
				font-size: 26rpx;
				text-align: left;
				color: #a0a0a0;
			}
		}

		.views-text {
			flex: 1;
			margin-left: 10rpx;
		}

		.views-text span:nth-child(1) {
			vertical-align: middle;
			display: inline-block;
			font-weight: 600;
			font-size: 28rpx;
			text-align: left;
			color: #161616;
		}

		.views-text span:nth-child(2) {
			vertical-align: middle;
			margin-left: 10rpx;
			font-weight: 400;
			font-size: 24rpx;
			text-align: left;
			color: #a0a0a0;
		}
	}

	.tabView {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 20rpx 0 0 0;

		.tabItem {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			.text1 {
				color: var(--view-theme);
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			.text2 {
				color: #000000;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.labelView {
		background-color: #FFFFFF;
		padding: 20rpx 100rpx;

		.labelItem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

		}

		.labelItem1 {
			padding: 20rpx 0;

			textarea {
				margin-top: 20rpx;
				background-color: #f5f5f5;
				padding: 20rpx;
				width: 95%;
				height: 150rpx;
				border-radius: 12rpx;
			}
		}
	}

	.dongtai {
		background-color: #FFFFFF;
		padding: 20rpx 32rpx;

		.dtlist {
			display: flex;
			flex-direction: column;

			.topView {
				display: flex;
				align-items: center;

				.avatarimg {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					margin-right: 20rpx;
				}

				.nameView {
					display: flex;
					flex-direction: column;
					margin-right: 20rpx;

					.name_text {
						font-size: 28rpx;
						font-weight: 500;
					}

					.sex0 {
						display: flex;
						align-items: center;
						background-color: #666666;
						padding: 4rpx 12rpx;
						border-radius: 44rpx;
						margin-top: 10rpx;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}

						text {
							font-size: 20rpx;
							color: #fff;
						}
					}

					.sex {
						display: flex;
						align-items: center;
						background-color: #4fe0fd;
						padding: 4rpx 12rpx;
						border-radius: 44rpx;
						margin-top: 10rpx;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}

						text {
							font-size: 20rpx;
							color: #fff;
						}
					}

					.sex1 {
						display: flex;
						align-items: center;
						background-color: #ff557f;
						padding: 4rpx 12rpx;
						border-radius: 44rpx;
						margin-top: 10rpx;

						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 4rpx;
						}

						text {
							font-size: 20rpx;
							color: #fff;
						}
					}
				}

				.dianzan {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: auto;

					text {
						font-size: 26rpx;
						color: #666666;
					}
				}
			}

			.contentView {
				margin-top: 20rpx;
			}

			.contentImg {
				margin: 20rpx 0;
				height: 300rpx;

				image {
					width: 60%;
					height: 300rpx;
				}
			}
		}
	}

	.cardBottom {
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 90rpx;
			height: 90rpx;
			margin: 0 32rpx;
		}
	}

	.herd {
		width: 100%;
		height: 384rpx;
		background-color: #FFFFFF;
		border-radius: 0 0 32rpx 32rpx;
		padding-top: 136rpx;
	}





	.oback {
		.odivpp {
			height: 420rpx;
			position: relative;

			.oive {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				width: 108rpx;
				height: 160rpx;

			}

			.oivee {
				width: 108rpx;
				height: 160rpx;
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
			}

			p {
				position: absolute;
				top: 30%;
				font-family: "PingFang SC";
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: left;
				color: #fff;

				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}

			p:nth-child(2) {
				position: absolute;
				top: 50%;
			}
		}

		.oimage {
			width: 654rpx;
			height: 776rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.odiver {
		.odictwo {
			padding-top: 100rpx;
			width: 650rpx;
			background-color: #fff;
			border-radius: 25rpx;

			.twimg {
				position: absolute;
				top: -50rpx;
				left: 50rpx;
				width: 120rpx;
				height: 120rpx;
				border: 2rpx solid #fff;
				border-radius: 100rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.twtext {
				margin: 0rpx 48rpx;
				// margin-top: 70rpx;
				background-color: #f7f8fa;
				padding: 36rpx 24rpx;
			}

			.annui {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 60rpx;

				view {
					padding: 20rpx 60rpx;
					border-radius: 44rpx;
				}

				view:nth-child(1) {
					border: 2rpx solid var(--view-theme);
					color: var(--view-theme);
				}

				view:nth-child(2) {
					background-color: var(--view-theme);
					color: #fff;
				}
			}
		}
	}

	.fenxianger {
		background-color: #fff;
		height: 250rpx;

		.item {
			padding: 20rpx;

			.iconfont {
				font-size: 70rpx;
				color: green;
			}

			view {
				font-size: 30rpx;
			}
		}
	}
</style>